{{#section 'head'}}
    <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>

    <script id="nurseryRhymeTemplate" type="text/x-handlebars-template">
        Marry had a little <b>\{{animal}}</b>, its <b>\{{bodyPart}}</b>
        was <b>\{{adjective}}</b> as <b>\{{noun}}</b>
    </script>
{{/section}}

<div id="nurseryRhyme">Click a button...</div>
<hr/>
<button id="btnNurseryRhyme">Generate nursery rhyme</button>
<button id="btnNurseryRhymeAjax">Generate nursery rhyme from AJAX</button>

{{#section 'jquery'}}
    <script>
        $(document).ready(function () {
            var nurseryRhymeTemplate = Handlebars.compile($('#nurseryRhymeTemplate').html());
            var $nurseryRhyme = $('#nurseryRhyme');
            $('#btnNurseryRhyme').on('click', function (e) {
                e.preventDefault();
                $nurseryRhyme.html(nurseryRhymeTemplate({
                    animal: 'basilisk',
                    bodyPart: 'tail',
                    adjective: 'sharp',
                    noun: 'a needle'
                }));
            });
            $('#btnNurseryRhymeAjax').on('click', function (e) {
                e.preventDefault();
                $.ajax('/data/nursery-rhyme', {
                    success: function (data) {
                        $nurseryRhyme.html(nurseryRhymeTemplate(data));
                    }
                });
            });
        });
    </script>
{{/section}}